<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '我的需求报送',
  },
}
</route>
<template>
  <div class="container py-5 px-4 box-border bg-[#f7f7f7]">
    <div class="data-boxs text-[14px]">
      <div class="data-item" v-for="(item, index) in data" :key="index" @longtap="handleDel(item)">
        <div class="data-top text-[#666]">
          <image :src="iconMap[item.service_title]" mode="widthFix" class="w-[15px] mr-8px"></image>
          {{ item.service_title }}
        </div>
        <div class="date text-[#999]">
          {{ item.create_time }}
        </div>
      </div>
    </div>
    <!-- 需求报送表单 -->
    <wd-action-sheet v-model="show">
      <div class="pt-14.5 pb-16 bg-[#fff]">
        <wd-form ref="form" :model="model">
          <wd-cell-group>
            <div class="form-item pb-15">
              <div
                class="form-label form-label-required text-[#666] text-[16px]"
                style="margin-left: 32rpx"
              >
                需求内容
              </div>
              <div class="form-value">
                <wd-textarea
                  label=""
                  label-width="100px"
                  prop="content"
                  custom-textarea-class="feedback-textarea"
                  :maxlength="200"
                  v-model="model.content"
                  placeholder="请输入您的建议..."
                  :clearable="false"
                  :rules="[{ required: true, message: '请填写内容' }]"
                />
                <div class="count text-[#666] text-[16px]">
                  {{ model.content ? model.content.length : 0 }}/200
                </div>
                <div class="clear text-[#666] text-[16px]" @click.stop="model.content = ''">
                  清除
                </div>
              </div>
            </div>
          </wd-cell-group>
        </wd-form>
        <div class="confirm" @click="handleSubmit">确认报送</div>
      </div>
    </wd-action-sheet>
    <!-- 再次确认报送 -->
    <NsOverlay
      v-model:visible="visible"
      height="630rpx"
      footerTop="86rpx"
      okText="确认报送"
      cancelText="立即取消"
      @ok="handleOk"
    >
      <div class="text-center tip-text" style="padding-top: 154rpx; line-height: 48rpx">
        即将为您报送
        <div>
          <span class="text-[#56b756]">土地流转</span>
          需求
        </div>
        请您确认是否需要报送
      </div>
    </NsOverlay>
    <!-- 确认成功 -->
    <NsOverlay
      v-model:visible="successVisible"
      height="462rpx"
      footerTop="34rpx"
      okText="确定"
      buttonSize="small"
      :showCancel="false"
    >
      <div class="text-center tip-text" style="padding-top: 68rpx; line-height: 48rpx">
        <image src="@/static/images/check-success.png" mode="widthFix" class="w-[50px]"></image>
        <div class="mt-5 text-[#666]">
          需求已经为您报送
          <br />
          工作人员将与您联系
        </div>
      </div>
    </NsOverlay>
  </div>
</template>

<script setup lang="ts">
import NsOverlay from '@/components/ns-overlay.vue'
import p1 from '@/static/images/land-transfer.png'
import p2 from '@/static/images/loan.png'
import p3 from '@/static/images/apm.png'
import p4 from '@/static/images/nz.png'
import p5 from '@/static/images/employment.png'
import p6 from '@/static/images/sales.png'
import p7 from '@/static/images/recycle.png'
import p8 from '@/static/images/other-need.png'
import {deleteDemand, myDemand} from '@/service/user'
import {useToast} from "wot-design-uni";

const iconMap = {
  土地流转: p1,
  农业贷款: p2,
  农业种植机械设备服务: p3,
  '农资服务（农业种植所需）': p4,
  劳务雇佣: p5,
  农产品出售: p6,
  农业废弃物回收: p7,
  其他需求: p8,
}
const data = ref<IDemand[]>([])
const params = reactive<IPage>({
  page: 1,
  limit: 10,
})
const lastPage = ref(1)
const getList = async () => {
  const res: IResData<IPageRes<IDemand>> = await myDemand(params)
  if (res.code === 1) {
    lastPage.value = res.data.last_page
    data.value = params.page === 1 ? res.data.data : data.value.concat(res.data.data)
  }
}
const show = ref(false)

const model = reactive<{
  // 内容
  content: string
}>({
  content: '',
})

const form = ref()
const toast = useToast()
const visible = ref(false)
const successVisible = ref(false)
async function handleDel(item: IDemand) {
  // const res: IResData<any> = await deleteDemand(item.id)
  // if (res.code === 1) {
  //   toast.show('删除成功')
  // }
}
function handleSubmit() {
  // console.log(form.value);

  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        console.log(111)
        show.value = false
        visible.value = true
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}

function handleOk() {
  visible.value = false
  successVisible.value = true
}
onLoad(async () => {
  await getList()
})
onReachBottom(() => {
  if (lastPage.value > params.page) {
    params.page++
    getList()
  }
})
</script>
<style scoped>
.container {
  min-height: 100vh;
}
.data-item {
  display: flex;
  gap: 20rpx;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 30rpx;
  padding: 0 30rpx;
  width: 100%;
  height: 150rpx;
  border-radius: 10px;
  background: #ffffff;
  box-sizing: border-box;
}

.form-label {
  margin-bottom: 20rpx;
}
.form-label-required {
  position: relative;
  padding-left: 8px;
}

.form-label-required::before {
  content: '*';
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 12px;
  color: #f61515;
}

.form-value {
  position: relative;
  background-color: #f7f7f7;
}

.count,
.clear {
  position: absolute;
  z-index: 2;
  bottom: 40rpx;
  left: 50rpx;
  background-color: #f7f7f7;
}

.clear {
  left: unset;
  right: 50rpx;
}

:deep(.wd-textarea__value) {
  height: 268rpx !important;
  background-color: #f7f7f7 !important;
}

:deep(.feedback-textarea) {
  padding: 16rpx 20rpx !important;
  height: 268rpx !important;
  background-color: #f7f7f7 !important;
  border-radius: 8px !important;
}

:deep(.wd-textarea__value) {
  border-radius: 16rpx;
}

:deep(.wd-textarea__suffix) {
  display: none;
}

.confirm {
  border-radius: 4px;
  background: #56b756;
  margin: auto;
  width: 690rpx;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
</style>
